<template>
	<view class="lh-container">
		<!-- 头部 -->
		<myHeader></myHeader>
		<!-- 订单 -->
		<template v-if="!userInfo.token">
			<orderVue :listData="listData[0]"></orderVue>
			<orderVue :listData="listData[1]"></orderVue>
			<!-- <orderVue :listData="listData[2]"></orderVue> -->
			<myOrderVue :listData="listData[2]"></myOrderVue>
		</template>
		<template v-if="userInfo.token">
			<orderVue :listData="listData[0]"></orderVue>
			<orderVue :listData="listData[1]"></orderVue>
			<myOrderVue :listData="listData[2]"></myOrderVue>
		</template>


		<view class="logout-btn" @click="logoutUser" v-if="userInfo.mobile">
			<view class="">
				<button class="btn-logout">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import initApi from '@/apis/init.js';
import { constStore } from '@/store/const.js';
import { useUserStore } from '@/store/user.js';
import { getALPhoneNumber, getWXphoneNumber, uuIds, getPhoneNumber, handleAuthError } from '@/utils/login.js';
/* h5 直接进来的 需要登录 如何区分需不需要登录 */
import orderVue from './component/order.vue';
import myOrderVue from './component/myOrder.vue';
//引入防抖函数
const { constInfo } = constStore();
const { userInfo } = storeToRefs(useUserStore());
const listData = ref([
	{
		title: '我的订单',
		subTitle: '查看我的订单列表',
		url: '/sxzz/list.png',
		page: '/pages/my/orderList',
		id: 1
	},
	{
		title: '智能客服',
		subTitle: '专业客服随时为你提供帮助',
		url: '/sxzz/message.png',
		page: '/pages/my/message',
		id: 2
	},
	{
		title: '权益兑换',
		subTitle: '查看获取权益信息',
		url: '/sxzz/vip.png',
		page: '/pages/my/message',
		id: 3
	}
]);
onLoad((query) => {
	// 支付宝 默认授权登录 判断token
	// #ifdef MP-ALIPAY
	// getALPhoneNumber();
	// #endif
	// #ifdef MP-WEIXIN
	// getWXphoneNumber();
	// #endif
});

onShow(() => {});

const logoutUser = async () => {
	console.log('进入退出');
	try{
		const res = await initApi.authLogout();
		console.log(res);
		if (res.code == 20000) {
			userInfo.value.info = {};
			userInfo.value.mobile = null;
			userInfo.value.token = null;
			uni.removeStorageSync('token');
			return uni.utils.toast('退出成功');
		} else {
			console.log('退出失败');
			userInfo.value.info = {};
			userInfo.value.mobile = null;
			userInfo.value.token = null;
			uni.removeStorageSync('token');
			return uni.utils.toast('退出成功');
		}
	}catch(e){
		//TODO handle the exception
		console.log(e,'-------->>>');
		userInfo.value.info = {};
		userInfo.value.mobile = null;
		userInfo.value.token = null;
		uni.removeStorageSync('token');
		return uni.utils.toast('退出成功');
	}

};
</script>

<style lang="scss" scoped>
.head-flex {
	display: flex;
	height: 100rpx;
	justify-content: space-between;
	.left {
		.top {
			font-size: 32rpx;
			font-weight: 500;
			line-height: 60rpx;
		}
		.bottom {
			font-size: 28rpx;
			color: rgb(96, 98, 102);
		}
	}
}

.u-body-item {
	font-size: 32rpx;
	color: #333;
	padding: 20rpx 10rpx;
}
.noLoginImage {
	position: fixed;
	bottom: 70rpx;
	left: 50%;
	transform: translateX(-50%);
}
.LoginImage {
	position: fixed;
	bottom: 0rpx;
	left: 50%;
	transform: translateX(-50%);
}
.logout-btn {
	width: 332rpx;
	height: 100rpx;
	margin: 0 auto;
	margin-top: 60rpx;
	margin-bottom: 30rpx;
	border-radius: 50px;
	border: 1px solid transparent;
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
	background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 80%), linear-gradient(135deg, rgba(178, 130, 255, 1), rgba(255, 96, 96, 1), rgba(0, 122, 255, 1));
	.btn-logout {
		background-color: none;
		width: 332rpx;
		height: 100rpx;
		border-radius: 50rpx;
		line-height: 100rpx;
		padding: 0;
		margin: 0;
		border: none;
		box-shadow: none;
		border-style: none;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #060606;
		
	}
}
</style>
